/*
 * @Description:
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-03-20 17:21:44
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-07-15 16:47:03
 */
import { Promotion, Edit } from '@element-plus/icons-vue'
import DropdownMenu from './DropdownMenu/index.vue'
import { menuActionType } from '@/types/crud.types'
import type { PropType } from 'vue'

const IconComp = defineComponent(
	<T extends string | number>(props: { type: T }) => {
		return () => {
			switch (props.type) {
				case 'edit':
					return <Edit />
				case 'editor':
					return <Edit />
				case 'detail':
					return <Promotion />
				case 'delete':
					return <icon-delete theme="outline" strokeWidth={3} />
			}
		}
	},
	{
		props: ['type'],
	}
)

export default defineComponent({
	name: 'AplidActions',
	components: {
		DropdownMenu,
		IconComp,
	},
	props: {
		list: {
			type: Object as PropType<menuActionType>,
		},
		flag: {
			type: String,
			default: 'list',
		},
		row: {
			type: Object,
			default: () => ({}),
		},
		auth: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ['change'],
	setup(props, { slots, attrs, emit }) {
		const handleOperate = (item) => {
			emit('change', item.operate, props.row, item.label)
		}
		return () => {
			const btnList: any = props.list
				? props.list
				: [
						{
							...props,
						},
				  ]
			let btnComponent: any = btnList.map((item: any, index) => {
				if (item.hide) {
					// 解析&&
					let parse1 = item.hide.split('&&')
					let keys = []
					let values = []
					// 解析==
					parse1.forEach((el) => {
						keys.push(el.split('==')[0])
						values.push(el.split('==')[1])
					})
					// 判断数值是否相等
					let res = keys.every((el, index) => {
						return props.row[el] == values[index]
					})
					item.show = !res
				}
				if (item.condition) {
					let conditionFun = new Function('return ' + item.condition)
					const conditionRes = conditionFun()(props.row)
					item.show = conditionRes
				}
				if (!item.show) {
					return
				}
        if(item.hideBtn) return
				if (props.flag === 'list') {
					let style = item.text
						? {
								padding: '0 2px',
								margin: 0,
						  }
						: {}
					const authStr = props.auth[item.operate] || item.auth
					return (
						<el-button
							style={style}
							v-auth={authStr}
							key={index}
							link={item.text}
							size={item.size}
							type={item.type}
							onClick={() => handleOperate(item)}
						>
							<el-icon v-show={item.icon} class="mr8">
								<IconComp type={item.icon}></IconComp>
							</el-icon>
							{item.label}
						</el-button>
					)
				} else {
					return (
						<li class="drop-menu-item">
							<el-button key={index} link={item.text} size={item.size} type={item.type} v-auth={item.auth} onClick={() => handleOperate(item)}>
								<el-icon v-show={item.icon} class="mr8">
									<IconComp type={item.icon}></IconComp>
								</el-icon>
								{item.label}
							</el-button>
						</li>
					)
				}
			})
			if (props.flag === 'list') {
				return btnComponent
			} else {
				return <DropdownMenu list={props.list} on-change={(e) => handleOperate(e)}></DropdownMenu>
			}
		}
	},
})
